<template>
  <div class="layout-col plr5 pb15">
    <div class="ww100 flex-ec mb15 plr10">
      <el-button @click="acitveEdite = !acitveEdite" :class="acitveEdite?'buttonStyle':''" type="primary">编 辑</el-button>
      <el-button type="primary" @click="save()">保存并执行</el-button>
    </div>
    <div class="ww100 flex1 overlay tc flex-ss warp hidde">
      <div class="hh50 p10" 
      v-for="(v, i) in state.chainList" :key="i" 
      :class="v.value == '1' || v.value == '4'? 'ww35':'ww65'">
        <div class="layout-col bs mb15" >
          <div class="ww100 flex-bc plr12 ptb8 bs2">
            <div class="flex-sc">
              <div class="h28"><img class="hh100" src="@/assets/images/tibi-ico.png" /></div>
              <span class="f15 fw ml8">{{v.name}}</span>
            </div>
          </div>
          <div class="flex1 ww100 plr30 ptb20 f16 styleClass flex-ss overlay tc warp hidde">
            <div class="flex-col ww100" v-for="(vv, ii, kk) in v.list" :key="ii" >
              <div :class="v.value == '3' || v.value == '4'? 'flex warp' : 'flex-col'" class="ww100" v-for="(vvv, iii) in vv.config" :key="iii">
                <!-- 温度 -->
                <div class="ww100" v-if="iii == 'C_2054'" v-for="(vvvv, iiii) in vvv" :key="iiii">
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'D'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>温度 ＞ 
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div>℃, 自动开启空调制冷功能</div>
                  </div>
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'X'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>温度 ＜ 
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div>℃, 自动关闭空调制冷功能</div>
                  </div>
                </div>
                <!-- 湿度 -->
                <div class="ww100" v-if="iii == 'C_2055'" v-for="(vvvv, iiii) in vvv" :key="iiii">
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'D'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>湿度 ＞ 
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div>%, 自动开启空调干燥功能</div>
                  </div>
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'X'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>湿度 ＜ 
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div>%, 自动关闭空调干燥功能</div>
                  </div>
                </div>
                <!-- 水泵 -->
                <div class="ww100" v-if="iii == 'C_6147'" v-for="(vvvv, iiii) in vvv" :key="iiii">
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'D'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>水位 ＞ 
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div>cm, 自动开启水泵设备</div>
                  </div>
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'X'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>水位 ＜ 
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div>cm, 自动关闭水泵设备</div>
                  </div>
                </div>
                <!-- SF6 -->
                <div class="flex-sc" v-if="iii == 'C_4307'" v-for="(vvvv, iiii) in vvv" :key="iiii">
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'D'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>SF6气体浓度 ＞  
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div> ppm，自动开启风机，</div>
                  </div>
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'T'">并运行
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div>分钟后自动关闭风机</div>
                  </div>
                </div>
                <!-- O2 -->
                <div class="flex-sc" v-if="iii == 'C_4309'" v-for="(vvvv, iiii) in vvv" :key="iiii">
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'X'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>氧气浓度 ＜   
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div> %，自动开启风机，</div>
                  </div>
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'T'"> 并运行
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div>分钟后自动关闭风机</div>
                  </div>
                </div>
                <!-- 开门 -->
                <div class="ww100" v-if="iii == 'C_doorState'" v-for="(vvvv, iiii) in vvv" :key="iiii">
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'T'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>开门（只要开一扇门），自动开启风机，并运行   
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div> 分钟后自动关闭风机</div>
                  </div>
                </div>
                 <!-- 每天 -->
                <div class="flex-sc" v-if="iii == 'C_state'" v-for="(vvvv, iiii) in vvv" :key="iiii">
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'S'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>风机每   
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div> 小时，自动开启，</div>
                  </div>
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'B'">首次开始时间
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div>，运行</div>
                  </div>
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'T'">
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div>分钟后自动关闭</div>
                  </div>
                </div>
                <!-- 视频开门 -->
                <div class="ww100" v-if="iii == 'C_camera'" v-for="(vvvv, iiii) in vvv" :key="iiii">
                  <div class="flex-sc ww100 ptb15" v-if="iiii == 'T'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>检测到开门情况，自动开启照明，摄像机旋转到门禁位置开始摄影，   
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div> 分钟后，旋转到默认位置，并关闭照明</div>
                  </div>
                </div>
                <!-- 视频烟感 -->
                <div class="ww100" v-if="iii == 'C_6154'" v-for="(vvvv, iiii) in vvv" :key="iiii">
                  <div class="flex-sc ww100 ptb15 warp" v-if="iiii == 'T'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>检测到烟雾报警情况，自动开启照明，摄像机旋转到门禁位置开始摄影，   
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div> 分钟后，旋转到默认位置，并关闭照明</div>
                  </div>
                </div>
                <!-- 视频红外线 -->
                <!-- <div class="ww100" v-if="iii == 'C_0'" v-for="(vvvv, iiii) in vvv" :key="iiii">
                  <div class="flex-sc ww100 ptb15 warp" v-if="iiii == 'T'">
                      <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>检测到红外报警情况，自动开启照明，摄像机旋转到门禁位置开始摄影，   
                      <el-input :disabled="acitveEdite" class="mlr5" v-model="vvv[iiii]" style="width: 50px" maxlength="30" /> 
                      <div> 分钟后，旋转到默认位置，并关闭照明</div>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div> 
        <!-- 水泵 -->
        <!-- <div class="flex1 ww100 p35 f16 styleClass" v-if="v.type == 'SF6_O2'">
          <div class="flex-sc mb35">
            <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>水位 ＞ 
            <el-input :disabled="acitveEdite" class="mlr5" v-model="state.data.c1" style="width: 50px" maxlength="30" /> 
            cm, 自动开启水泵设备
          </div>
          <div class="flex-sc mb35">
            <div class="w8 h8 bgi11 rad100 mr10 mt2"></div>水位 ＜ 
            <el-input :disabled="acitveEdite" class="mlr5" v-model="state.data.c2" style="width: 50px" maxlength="30" /> 
            cm, 自动关闭水泵设备
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import api from '@/api'
const { proxy }: any = getCurrentInstance();
const publicStore = proxy.publicStore();
const state = reactive({
  ...publicStore.$state,
  sensorlist: [],
  chainList: [
    {name: '空调联动', value: '1'},
    {name: '水泵联动', value: '2'},
    {name: '视频联动', value: '4'},
    {name: '风机联动', value: '3'},
  ]
});
let acitveEdite = $ref(true)

onMounted(async () => {
  getInit()
  init()
});

const getInit = async () => {
  state.query = {"o": "o_sensor" , "p": [publicStore.distributId], "i": 0}
  state.params = {queryApi: state.query}
  let res = await publicStore.post(state.params)
  state.sensorlist = proxy.isNull(res)? [] : res.filter(a=>a.class == '0')
};

const init = async () => {
  state.query = {"o": "o_rotate_config", "i": 2, "p": [publicStore.distributId]}
  state.params = {queryApi: state.query}
  state.list = await publicStore.post(state.params)
  state.chainList.forEach(v => {
    let list = state.list.filter(a=>a.chain == v.value)
    let tempArr = []
    list.forEach(vv => {
      let exist = tempArr.find(a=>a.type == vv.type)
      if(!exist) {
        vv.config = JSON.parse(vv.config)
        tempArr.push(vv)
      }
    })
    v.list = proxy.isNull(tempArr)? [] : tempArr
  })
  console.log('state.chainList', state.chainList)
}

const save = async () => {
 ElMessageBox.confirm('是否确定保存?', '删除提示', {
    confirmButtonText: '确定',
    cancelButtonText: '关闭',
    type: 'error'
  }).then(() => {
    let tempArr = []
    console.log('sensorlist---', state.sensorlist)
    state.chainList.forEach(v => {
      if(!proxy.isNull(v.list)){
        v.list.forEach((vv, ii) => {
          getQuery(vv, ii, tempArr)
        })
      }
    })
    update(tempArr)
  })
}

const update = async(allFrom) => {
  api.updateApi(allFrom).then((res:any) => {
    if(res.errcode == 0){
      ElNotification({ title: '提示', message: '操作成功', type: 'success' })
      configchange()
      init()
    }
  }).catch((err) => {
    ElNotification({ title: '提示', message: '操作失败', type: 'error' })
  })
}

const configchange = async() => {
  api.configchange({}).then((res:any) => {
    if(res.errcode == 0){
      console.log('通知成功')
    }
  }).catch((err) => {
    console.log('通知失败')
  })
}

const getQuery = async(vv, ii, tempArr) => {
  let list = []
  if(vv.sensor_id == 0){
    list = [{id: 0}]
  }else{
    list = state.sensorlist.filter(a=>a.type == vv.type)
  }
  // list.push({id: 0})
  // list.push({id: 1})
  list.forEach((item, index) => {
    let add = {}
    let temp = {sensor_id: item.id, stationNum: vv.stationNum, type: vv.type, chain: vv.chain, config: JSON.stringify(vv.config)}
    let exist = state.list.find(a=>a.sensor_id == item.id)
    if(exist){
      add = {"o": "o_rotate_config", "t": "upd", "a": "更新", "id": exist.id}
    }else{
      add = {"o": "o_rotate_config", "t": "add", "a": "添加", "id": new Date().getTime() + index + ""}
    }
    add = Object.assign(temp, add)
    tempArr.push(add)
  })
}

</script>

<style>
.styleClass .el-input__wrapper{
	color: #1BFFDF  !important;
	background: rgba(17, 8, 73, 0.3) !important;
	box-shadow: 0 0 0 1px #2663AA inset!important;
	border-radius: 5px !important;
	width: 100%;
  box-sizing: border-box;
}
.styleClass .el-input__inner{
	color: #1BFFDF !important;
}
</style>

<style scoped lang="scss">

</style>


  